<template>
  <div class="upload-file">
    <div slot="tip" class="el-upload__tip" style="margin-bottom:10px;">上传文件不超过100m</div>
    <el-upload
       ref="upload"
      class="upload-demo"
      accept=".doc, .jpg, .jpeg, .txt, .pdf, .xlsx, .docx"
      :action="uploadpath"
      :headers="uoloadheaders"
      show-file-list
      list-type="picture-card"
      :on-success="handleAvatarSuccess"
      :on-change="handleChange"
      :on-remove="handleRemove"
      :limit="1"
      :on-exceed="handleExceed"
      :file-list="fileList"
      name="uploadfile_ant">
      <el-button size="small" type="primary">点击上传</el-button>
       <div slot="file" slot-scope="{file}">
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt>
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in" />
          </span>
          <span
            v-if="!disabled"
            slot
            class="el-upload-list__item-delete"
            @click="handleRemove(file)"
          >
            <i class="el-icon-delete" />
          </span>
        </span>
      </div>
    </el-upload>
    <el-dialog v-dialogDrag :close-on-click-modal="false" :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>

</template>

<script>

  // import { uploadFile, getFileList, clean } from '@/api/kxUploadFile'
  import { getFileList, clean } from '@/api/uploadOrders'
  import { getToken } from '@/utils/auth'
  import { Message } from 'element-ui'
  
  export default {
    props: { // 第二种方式
      link: {
        type: String,
        required: true
      },
      filetype: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        uploadpath: '',
        name: '',
        dialogImageUrl: '',
        uoloadheaders: {},
        from: {
          name: ''
        },
        dialogVisible: false,
        visitPath: null,
        disabled: false,
        fileData: '',  // 文件上传数据（多文件合一）
        fileList: []   // upload多文件数组
      }
    },
    mounted() {
      this.getDetailed()
      this.getUploadpath()
    },
    methods:{
      getUploadpath() {
        var path = '/baseFile/upload?linkId='+this.link+ '&filetype=File&fileCo=BW'
        this.uploadpath = process.env.VUE_APP_BASE_API + path
        this.uoloadheaders = { 'X-Token': getToken() }
      },
      getDetailed() {
        getFileList({ linkId: this.link, filetype: this.filetype }).then(response => {
          
          this.fileList = response.data
        }).catch(function() {
        })
      },

      handleAvatarSuccess(res, file) {
        
        this.uploadLoading = false
        if (res.code === 20000) {
          this.visitPath = res.data
          Message({
            message: '上传成功',
            type: 'success',
            duration: 5 * 1000
          })
        } else {
          Message({
            message: res.msg,
            type: 'error',
            duration: 5 * 1000
          })
        }
      },
      //移除
      handleRemove(file, fileList) {
        
        this.fileList = fileList;
        var submitdate = this.from
       
        submitdate.id=file.id
        clean(submitdate).then(response => { 
        })
      },
      // 选取文件超过数量提示
      handleExceed(files, fileList) {
        
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      //监控上传文件列表
      handleChange(file, fileList) {
        
        let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
        if (existFile) {
          this.$message.error('当前文件已经存在!');
          fileList.pop();
        }
        this.fileList = fileList;
      },
      handlePictureCardPreview(file) {
        
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
  }
</script>

<style scoped>

</style>